Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP13。

延續前一回 DependencyInjection (依賴注入，簡稱 DI) 的觀念，持續地來改寫 TopStoreApp 在 View 與 ViewModel 處理的方式為 .NET MAUI 所設計的注入函式庫。

首先，打開 "App.xaml.cs" 檔案，並在 CreateMauiApp() 方法下面，繼續撰寫以下方法的設計：

    private static MauiAppBuilder RegisterAppViewsAndViewModels(this MauiAppBuilder builder)
    {
        builder.Services.AddSingleton<Pages.PeoplePage>();
        builder.Services.AddSingleton<ViewModels.PeoplePageViewModel>();

        builder.Services.AddTransient<Pages.PersonDetailPage>();
        builder.Services.AddTransient<ViewModels.PersonDetailPageViewModel>();

        return builder;
    }

根據微軟文件在 Microsoft.Extensions.DependencyInjection 對 ServiceLifetime Enum 的 API 解釋：

所以在上述新增的程式當中：

• builder.Services.AddSingleton<Pages.PeoplePage>() 會在整個 App 運作過程中，只建立一個唯一的執行個體的 PeoplePage 頁面物件，在 App 當中運作執行。
• builder.Services.AddTransient<Pages.PersonDetailPage>() 會在整個 App 運作過程中，有呼叫使用時就建立全新的執行個體的 PersonDetailPage 頁面物件，在 App 當中運作執行。

緊接著在先前一回撰寫 .RegisterAppDataService(); 的方法之前，再加入此方法 .RegisterAppViewsAndViewModels() 的呼叫。

完成結果如下圖：

再來打開 Pages 底下的 "PeoplePage.xaml" 將其中的 XAML 標記刪除(藍色框所示)：

此處用註解(下圖紅框圈起的部分) XAML ，表示要刪除的 XAML 標記：

另外也打開 "PeoplePage.xaml" 所對應的 "PeoplePage.xaml.cs" ，並刪除掛在類別最上方，過去 Xamarin.Forms 撰寫時所掛上的 [XamlCompilation(XamlCompilationOptions.Compile)] 的 Attritube (如下圖藍框所示)，因為 .NET MAUI 已經都內建預先編譯 XAML 標記：

接著變更 PeoplePage 類別的原建構方法的封裝修飾詞改為 private (如下圖綠框所示)，並設計一個可供 ViewModels.PeoplePageViewModel 的物件當作參數傳入的建構方法，並在建構式當中把傳入的物件參數指定給 BindingContext 屬性：

public PeoplePage(ViewModels.PeoplePageViewModel peoplePageViewModel) : this()
{
    BindingContext = peoplePageViewModel;
}

完成結果如下圖紅框所示：

同樣的來開啟 Pages 底下的 "PersonDetailPage.xaml" 將其中的 XAML 標記刪除(藍色框所示)：

此處用註解(下圖紅框圈起的部分) XAML ，表示要刪除的 XAML 標記：

也接著打開 "PersonDetailPage.xaml" 所對應的 "PersonDetailPage.xaml.cs" 並刪除類別最上方，在 Xamarin.Forms 撰寫時所掛上的 [XamlCompilation(XamlCompilationOptions.Compile)] 這個 Attritube (如下圖藍框所示)，因為 .NET MAUI 已經都內建預先編譯 XAML 標記：

接著變更 PersonDetailPage 類別的原建構方法的封裝修飾詞為 private (如下圖綠框所示)，並設計一個可供 ViewModels.PersonDetailPageViewModel 的物件當作參數傳入的建構方法，並在建構式當中把傳入的物件參數指定給 BindingContext 屬性：

public PersonDetailPage(ViewModels.PersonDetailPageViewModel personDetailPageViewModel) : this()
{
    BindingContext = personDetailPageViewModel;
}

完成結果如下圖紅框所示：

完成後，就執行測試看看，所有在 TopStoreApp 已完成的功能都能正常運作沒問題唷！

本 EP 介紹所完成的範例程式碼可在此下載。